<script setup lang="ts">
import {
  NIcon,
  NGrid,
  NGi,
  NProgress,
  NInput,
  NDatePicker,
  useMessage,
  NSpin,
  NModal,
  NScrollbar,
  NEmpty
} from 'naive-ui'
import { ref, onMounted, reactive } from 'vue'
import { Search } from '@vicons/ionicons5'
import { sendRequest } from '@/utils/api'
import LineChart from './components/Echarts/LineChart.vue'
import BarChart from './components/Echarts/BarChart.vue'
import dataInsight1a from '/src/assets/svg/dataInsight1-1.svg'
import dataInsight1 from '/src/assets/svg/dataInsight1.svg'
import dataInsight2a from '/src/assets/svg/dataInsight2-1.svg'
import dataInsight2 from '/src/assets/svg/dataInsight2.svg'
import dataInsight3a from '/src/assets/svg/dataInsight3-1.svg'
import dataInsight3 from '/src/assets/svg/dataInsight3.svg'
import dataInsight4a from '/src/assets/svg/dataInsight4-1.svg'
import dataInsight4 from '/src/assets/svg/dataInsight4.svg'
import dataInsight5a from '/src/assets/svg/dataInsight5-1.svg'
import dataInsight5 from '/src/assets/svg/dataInsight5.svg'
import { startOfDay } from 'date-fns'
const message = useMessage()
onMounted(() => {
  getBusinessSnapshot()
  getAddition('年')
  getAddition('月')
  getAdditionTrend('年走势')
  getVersionType()
  getCollector()
  getCollectWay()
  getWarehouseSnapshot()
  getCatalog('年')
  getCatalog('月')
  getCatalog('周')
  getCatalogTrend('年走势')
  getUserTrend('年走势')
})
const latestRequestRef = reactive({
  getBusinessSnapshot: 0,
  getAddition: 0,
  getAdditionTrend: 0,
  getVersionType: 0,
  getCollector: 0,
  getAllCollector: 0,
  getCollectWay: 0,
  getAllCollectWay: 0,
  getWarehouseSnapshot: 0,
  getCatalog: 0,
  getCatalogTrend: 0,
  getUserTrend: 0
})
//--------------------------------------------------------------------
// 藏品业务快照(前一天)
const topCountDate = ref(
  `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(
    new Date().getDate() - 1
  ).padStart(2, '0')}`
)
const topCountList = ref([
  {
    label: '所有藏品(件)',
    count: '-',
    imgL: dataInsight1a,
    imgR: dataInsight1
  },
  {
    label: '待编目藏品(件)',
    count: '-',
    imgL: dataInsight2a,
    imgR: dataInsight2
  },
  {
    label: '待审核藏品(件)',
    count: '-',
    imgL: dataInsight3a,
    imgR: dataInsight3
  },
  {
    label: '待入库藏品(件)',
    count: '-',
    imgL: dataInsight4a,
    imgR: dataInsight4
  },
  {
    label: '已出库藏品(件)',
    count: '-',
    imgL: dataInsight5a,
    imgR: dataInsight5
  }
])
/**获取藏品业务快照（日） */
const getBusinessSnapshot = async () => {
  const currentRequest = Date.now() // 加一个时间戳
  latestRequestRef.getBusinessSnapshot = currentRequest // 保存时间戳到最后一次被点击
  const [error, res] = await sendRequest({
    module: 'dataInsight',
    api: 'businessSnapshot',
    override: {
      params: {
        date: topCountDate.value
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  if (latestRequestRef.getBusinessSnapshot == currentRequest) {
    topCountList.value[0].count = res.data.totalNum
    topCountList.value[1].count = res.data.preCatalogNum
    topCountList.value[2].count = res.data.preAuditNum
    topCountList.value[3].count = res.data.preStoreNum
    topCountList.value[4].count = res.data.outboundNum
  }
}
/**选择日期校验（只能选过去） */
const isCanSelectDate = (ts: number) => {
  return new Date(ts) > new Date()
}
const d = 86400000
const isCanSelectDateRange = (
  ts: number,
  type: 'start' | 'end',
  range: [number, number] | null
) => {
  if (type === 'start' && range !== null) {
    return startOfDay(range[1]).valueOf() - startOfDay(ts).valueOf() > d * 6
  }
  if (type === 'end' && range !== null) {
    return startOfDay(ts).valueOf() - startOfDay(range[0]).valueOf() > d * 6
  }
}
//--------------------------------------------------------------------
//藏品新增统计（年/月）
const collectionAddCountYear = ref('-')
const collectionAddCountMonth = ref('-')
const collectionCountYear = ref(`${new Date().getFullYear()}-01-01`)
const collectionCountMonth = ref(
  `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-01`
)
/**藏品新增统计（年/月） */
const getAddition = async (type: string) => {
  let startDate = type == '年' ? collectionCountYear.value : collectionCountMonth.value
  let endDate =
    type == '年'
      ? `${collectionCountYear.value.split('-')[0]}-12-31`
      : getLastDateOfMonth(
          new Date(collectionCountMonth.value).getFullYear(),
          new Date(collectionCountMonth.value).getMonth() + 1
        )
  const currentRequest = Date.now() // 加一个时间戳
  latestRequestRef.getAddition = currentRequest // 保存时间戳到最后一次被点击
  const [error, res] = await sendRequest({
    module: 'dataInsight',
    api: 'addition',
    override: {
      params: {
        startDate,
        endDate
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  if (latestRequestRef.getAddition == currentRequest) {
    type == '年'
      ? (collectionAddCountYear.value = res.data.increaseNum)
      : (collectionAddCountMonth.value = res.data.increaseNum)
  }
}
//--------------------------------------------------------------------
// 新增藏品走势统计
const curCollectionLineTab = ref('年走势')
const collectionLineData = ref([])
const collectionCountLineYear = ref(`${new Date().getFullYear()}-01-01`)
const collectionCountLineMonth = ref(
  `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-01`
)
const collectionLineLoading = ref(false)
const handleChangeTab = (val: string) => {
  curCollectionLineTab.value = val
  getAdditionTrend(val)
}
/**藏品新增统计（年/月） */
const getAdditionTrend = async (valType: string) => {
  collectionLineLoading.value = true
  let startDate =
    valType == '年走势' ? collectionCountLineYear.value : collectionCountLineMonth.value
  let endDate =
    valType == '年走势'
      ? `${collectionCountLineYear.value.split('-')[0]}-12-31`
      : getLastDateOfMonth(
          new Date(collectionCountLineMonth.value).getFullYear(),
          new Date(collectionCountLineMonth.value).getMonth() + 1
        )
  const currentRequest = Date.now() // 加一个时间戳
  latestRequestRef.getAdditionTrend = currentRequest // 保存时间戳到最后一次被点击
  const [error, res] = await sendRequest({
    module: 'dataInsight',
    api: 'additionTrend',
    override: {
      params: {
        startDate,
        endDate,
        type: valType == '年走势' ? 1 : 2
      }
    }
  })
  collectionLineLoading.value = false
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  if (latestRequestRef.getAdditionTrend == currentRequest) {
    collectionLineData.value = res.data.list?.map((item: { time: any; num: any }) => {
      return { label: `${item.time}${valType == '年走势' ? '月' : ''}`, value: item.num }
    })
  }
}
//--------------------------------------------------------------------
// 藏品类型统计
const versionTypeDate = ref(
  `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(
    new Date().getDate() - 1
  ).padStart(2, '0')}`
)
const firstVersionTypeList = ref([])
const secondVersionTypeList = ref([])
const versionLoading = ref(false)
const updateVersionTypeDate = () => {
  getVersionType()
}
/** 藏品类型统计 */
const getVersionType = async () => {
  versionLoading.value = true
  let startDate = versionTypeDate.value
  let endDate = versionTypeDate.value
  const currentRequest = Date.now() // 加一个时间戳
  latestRequestRef.getVersionType = currentRequest // 保存时间戳到最后一次被点击
  const [error, res] = await sendRequest({
    module: 'dataInsight',
    api: 'versionType',
    override: {
      params: {
        // startDate,
        endDate
      }
    }
  })
  versionLoading.value = false
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  if (latestRequestRef.getVersionType == currentRequest) {
    res.data.subList = res.data.subList.splice(0, 10)
    firstVersionTypeList.value = res.data.list?.map((item: { type: any; num: any }) => {
      return { label: item.type, value: item.num }
    })
    secondVersionTypeList.value = res.data.subList?.map((item: { type: any; num: any }) => {
      return { label: item.type, value: item.num }
    })
  }
}
//--------------------------------------------------------------------
// 藏家统计
const collectorDate = ref(
  `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(
    new Date().getDate() - 1
  ).padStart(2, '0')}`
)
const collectorList: any = ref([])
const allCollectorList: any = ref([])
const collectorLoading = ref(false)
/** 获取藏家统计 */
const getCollector = async () => {
  collectorLoading.value = true
  collectorList.value = []
  let startDate = collectorDate.value
  let endDate = collectorDate.value
  const currentRequest = Date.now() // 加一个时间戳
  latestRequestRef.getCollector = currentRequest // 保存时间戳到最后一次被点击
  const [error, res] = await sendRequest({
    module: 'dataInsight',
    api: 'collector',
    override: {
      params: {
        // startDate,
        endDate
      }
    }
  })
  collectorLoading.value = false
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  if (latestRequestRef.getCollector == currentRequest) {
    let totalCount = 0
    let list = res.data.list?.map((item: { name: any; num: any }) => {
      totalCount += Number(item.num)
      return { label: item.name, value: item.num }
    })
    let top5 = list.splice(0, 5)
    collectorList.value = top5
    collectorList.value.forEach((item: any) => {
      item.percentage = (item.value / totalCount) * 100
    })
  }
}
/** 获取全部藏家统计 */
const getAllCollector = async () => {
  keywords.value = ''
  searchList.value = []
  allCollectorList.value = []
  const currentRequest = Date.now() // 加一个时间戳
  latestRequestRef.getAllCollector = currentRequest // 保存时间戳到最后一次被点击
  const [error, res] = await sendRequest({
    module: 'dataInsight',
    api: 'collector'
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  if (latestRequestRef.getAllCollector == currentRequest) {
    let totalCount = 0
    let list = res.data.list?.map((item: { name: any; num: any }) => {
      totalCount += Number(item.num)
      return { label: item.name, value: item.num }
    })
    allCollectorList.value = list
    allCollectorList.value.forEach((item: any) => {
      item.percentage = (item.value / totalCount) * 100
    })
  }
}
// 藏家模态框
const showCollectorModal = ref(false)
const openCollectorModal = () => {
  showCollectorModal.value = true
  getAllCollector()
}
const keywords = ref('')
const searchList: any = ref([])
const searchCollector = () => {
  if (!keywords.value) {
    return
  }
  let index = allCollectorList.value.findIndex(
    (item: { label: string }) => item.label == keywords.value
  )
  if (index !== -1) {
    searchList.value = []
    let res: any = allCollectorList.value[index]
    res.rank = index
    searchList.value.push(res)
  } else return message.error('不支持模糊搜索')
}
//--------------------------------------------------------------------
// 征集方式统计
const collectWayDate = ref(
  `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(
    new Date().getDate() - 1
  ).padStart(2, '0')}`
)
const collectWayList: any = ref([])
const allCollectWayList: any = ref([])
const collectWayLoading = ref(false)
/** 获取征集方式统计 */
const getCollectWay = async () => {
  collectWayLoading.value = true
  let startDate = collectWayDate.value
  let endDate = collectWayDate.value
  const currentRequest = Date.now() // 加一个时间戳
  latestRequestRef.getCollectWay = currentRequest // 保存时间戳到最后一次被点击
  const [error, res] = await sendRequest({
    module: 'dataInsight',
    api: 'collectWay',
    override: {
      params: {
        // startDate,
        endDate
      }
    }
  })
  collectWayLoading.value = false
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  if (latestRequestRef.getCollectWay == currentRequest) {
    collectWayList.value = res.data.list?.map((item: { name: any; num: any }) => {
      return { label: item.name, value: item.num }
    })
  }
}
/** 获取全部征集方式统计 */
const getAllCollectWay = async () => {
  colKeywords.value = ''
  searchColList.value = []
  allCollectWayList.value = []
  const currentRequest = Date.now() // 加一个时间戳
  latestRequestRef.getAllCollectWay = currentRequest // 保存时间戳到最后一次被点击
  const [error, res] = await sendRequest({
    module: 'dataInsight',
    api: 'collectWay'
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  if (latestRequestRef.getAllCollectWay == currentRequest) {
    allCollectWayList.value = res.data.list?.map((item: { name: any; num: any }) => {
      return { label: item.name, value: item.num }
    })
  }
}
// 征集方式模态框
const showCollectionModal = ref(false)
const openCollectionModal = async () => {
  showCollectionModal.value = true
  await getAllCollectWay()
  searchCollectWay()
}
const colKeywords = ref('')
const searchColList: any = ref([])
const searchCollectWay = () => {
  if (!colKeywords.value) {
    searchColList.value = allCollectWayList.value
    return
  }
  let index = allCollectWayList.value.findIndex(
    (item: { label: string }) => item.label == colKeywords.value
  )
  if (index !== -1) {
    searchColList.value = []
    let res: any = allCollectWayList.value[index]
    res.rank = index
    searchColList.value.push(res)
  } else return message.error('不支持模糊搜索')
}
//--------------------------------------------------------------------
// 库房统计
const warehouseDate = ref(
  `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(
    new Date().getDate() - 1
  ).padStart(2, '0')}`
)
const wareHouseListA: any = ref([])
const wareHouseListB: any = ref([])
const allWareHouseList: any = ref([])
const wareHouseLoading = ref(false)
/** 获取库房统计 */
const getWarehouseSnapshot = async () => {
  wareHouseLoading.value = true
  wareHouseListA.value = []
  wareHouseListB.value = []
  allWareHouseList.value = []
  const currentRequest = Date.now() // 加一个时间戳
  latestRequestRef.getWarehouseSnapshot = currentRequest // 保存时间戳到最后一次被点击
  const [error, res] = await sendRequest({
    module: 'dataInsight',
    api: 'warehouseSnapshot',
    override: {
      params: {
        date: warehouseDate.value,
        size: 1000
      }
    }
  })
  wareHouseLoading.value = false
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  if (latestRequestRef.getWarehouseSnapshot == currentRequest) {
    let totalCount = 0
    let list = res.data.list?.map((item: { num: any; name: any }) => {
      totalCount += Number(item.num)
      return { label: item.name, value: item.num }
    })
    list?.forEach((item: any, index: number) => {
      allWareHouseList.value.push({ ...item, percentage: (item.value / totalCount) * 100 })
      if (index < 5) {
        wareHouseListA.value.push({ ...item, percentage: (item.value / totalCount) * 100 })
      }
      if (index >= 5 && index < 10) {
        wareHouseListB.value.push({ ...item, percentage: (item.value / totalCount) * 100 })
      }
    })
  }
}
// 库房统计模态框
const showWarehouseModal = ref(false)
const openWarehouseModal = () => {
  showWarehouseModal.value = true
}
const wareKeywords = ref('')
const searchWarehouseList: any = ref([])
const searchWarehouse = () => {
  if (!wareKeywords.value) {
    return
  }
  let index = allWareHouseList.value.findIndex(
    (item: { label: string }) => item.label == wareKeywords.value
  )
  if (index !== -1) {
    searchWarehouseList.value = []

    let res: any = allWareHouseList.value[index]
    searchWarehouseList.value.push(res)
  } else return message.error('不支持模糊搜索')
}
//--------------------------------------------------------------------
// 编目统计
const bmCountYear = ref('-')
const bmCountMonth = ref('-')
const bmCountWeek = ref('-')
const bmCountYearDate = ref(`${new Date().getFullYear()}-01-01`)
const bmCountMonthDate = ref(
  `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-01`
)
const bmCountWeekDate = ref([
  `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(
    new Date().getDate() - 7
  ).padStart(2, '0')}`,
  `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(
    new Date().getDate() - 1
  ).padStart(2, '0')}`
])
/** 获取编目统计（年/月/周） */
const getCatalog = async (type: string) => {
  let startDate, endDate
  switch (type) {
    case '年':
      startDate = bmCountYearDate.value
      endDate = `${bmCountYearDate.value.split('-')[0]}-12-31`
      break
    case '月':
      startDate = bmCountMonthDate.value
      endDate = getLastDateOfMonth(
        new Date(bmCountMonthDate.value).getFullYear(),
        new Date(bmCountMonthDate.value).getMonth() + 1
      )
      break
    case '周':
      startDate = bmCountWeekDate.value[0]
      endDate = bmCountWeekDate.value[1]
      break
  }
  const currentRequest = Date.now() // 加一个时间戳
  latestRequestRef.getCatalog = currentRequest // 保存时间戳到最后一次被点击
  const [error, res] = await sendRequest({
    module: 'dataInsight',
    api: 'catalog',
    override: {
      params: {
        startDate,
        endDate
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  if (latestRequestRef.getCatalog == currentRequest) {
    switch (type) {
      case '年':
        bmCountYear.value = res.data.num
        break
      case '月':
        bmCountMonth.value = res.data.num
        break
      case '周':
        bmCountWeek.value = res.data.num
        break
    }
  }
}
//--------------------------------------------------------------------
// 编目走势
const curBmLineTab = ref('年走势')
const bmLineData = ref([])
const bmCountLineYear = ref(`${new Date().getFullYear()}-01-01`)
const bmCountLineMonth = ref(
  `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-01`
)
const bmLineLoading = ref(false)
const handleChangeBmTab = (val: string) => {
  curBmLineTab.value = val
  getCatalogTrend(val)
}
/**藏品新增统计（年/月） */
const getCatalogTrend = async (valType: string) => {
  bmLineLoading.value = true
  let startDate = valType == '年走势' ? bmCountLineYear.value : bmCountLineMonth.value
  let endDate =
    valType == '年走势'
      ? `${bmCountLineYear.value.split('-')[0]}-12-31`
      : getLastDateOfMonth(
          new Date(bmCountLineMonth.value).getFullYear(),
          new Date(bmCountLineMonth.value).getMonth() + 1
        )
  const currentRequest = Date.now() // 加一个时间戳
  latestRequestRef.getCatalogTrend = currentRequest // 保存时间戳到最后一次被点击
  const [error, res] = await sendRequest({
    module: 'dataInsight',
    api: 'catalogTrend',
    override: {
      params: {
        startDate,
        endDate,
        type: valType == '年走势' ? 1 : 2
      }
    }
  })
  bmLineLoading.value = false
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  if (latestRequestRef.getCatalogTrend == currentRequest) {
    bmLineData.value = res.data.list?.map((item: { time: any; num: any }) => {
      return { label: `${item.time}${valType == '年走势' ? '月' : ''}`, value: item.num }
    })
  }
}
//--------------------------------------------------------------------
// 人员走势
const curUserLineTab = ref('年走势')
const userLineData = ref([])
const userCountLineYear = ref(`${new Date().getFullYear()}-01-01`)
const userCountLineMonth = ref(
  `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-01`
)
const userLineLoading = ref(false)
const handleChangeUserTab = (val: string) => {
  curUserLineTab.value = val
  getUserTrend(val)
}
/**藏品新增统计（年/月） */
const getUserTrend = async (type: string) => {
  userLineLoading.value = true
  let startDate = type == '年走势' ? userCountLineYear.value : userCountLineMonth.value
  let endDate =
    type == '年走势'
      ? `${userCountLineYear.value.split('-')[0]}-12-31`
      : getLastDateOfMonth(
          new Date(userCountLineMonth.value).getFullYear(),
          new Date(userCountLineMonth.value).getMonth() + 1
        )
  const currentRequest = Date.now() // 加一个时间戳
  latestRequestRef.getUserTrend = currentRequest // 保存时间戳到最后一次被点击
  const [error, res] = await sendRequest({
    module: 'dataInsight',
    api: 'userTrend',
    override: {
      params: {
        startDate,
        endDate
      }
    }
  })
  userLineLoading.value = false
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  if (latestRequestRef.getUserTrend == currentRequest) {
    let top10 = res.data.list?.splice(0, 10)
    userLineData.value = top10?.map((item: { username: any; num: any }) => {
      return { label: item.username, value: item.num }
    })
  }
}

/** 根据年份、月份获取最后一天日期 */
function getLastDateOfMonth(year: any, month: any) {
  // 注意，月份是从0开始计数的，所以要减去1
  let date = new Date(year, month - 1, 1)
  date.setMonth(date.getMonth() + 1)
  date.setDate(date.getDate() - 1)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(
    date.getDate()
  ).padStart(2, '0')}`
}
function getMonday(date: string | number | Date) {
  const currentDate = new Date(date)
  const dayOfWeek = currentDate.getDay() // 获取当前日期是星期几
  const difference = currentDate.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1) // 计算与星期一的差值
  currentDate.setDate(difference) // 设置日期为本周的星期一
  return `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(
    2,
    '0'
  )}-${String(currentDate.getDate()).padStart(2, '0')}`
}
</script>
<template>
  <div class="container">
    <div class="header">
      <span>杭州国家版本馆业务数据洞察</span>
      <n-date-picker
        v-model:formatted-value="topCountDate"
        format="yyyy年MM月dd日"
        style="width: 200px"
        value-format="yyyy-MM-dd"
        :is-date-disabled="isCanSelectDate"
        @update:formatted-value="getBusinessSnapshot"
      />
    </div>
    <div class="main-content">
      <!-- 藏品总数 -->
      <n-grid
        class="data-v-top"
        :cols="5"
        :x-gap="18"
      >
        <n-gi
          class="data-v-top-left"
          :span="1"
          v-for="(item, index) in topCountList"
          :key="index"
        >
          <div class="content">
            <img
              :src="item.imgL"
              alt=""
              class="img-f"
            />
            <div class="top">
              <div class="icon-left">
                <img
                  :src="item.imgR"
                  alt=""
                  class="img-l"
                />
              </div>
              <div class="col-txt center">{{ item.label }}</div>
            </div>
            <div class="bottom">
              <div class="col-count">
                {{ item.count }}
              </div>
            </div>
          </div>
        </n-gi>
      </n-grid>
      <div class="data-v-main">
        <!-- 藏品&藏品类型统计 -->
        <n-grid
          :cols="8"
          :x-gap="18"
        >
          <n-gi
            :span="3"
            class="card"
            style="padding-bottom: 0"
          >
            <div class="card-title">
              <div class="left center">
                <div class="line"></div>
                <div class="title">藏品统计</div>
              </div>
            </div>
            <div class="card-content">
              <n-grid
                :cols="2"
                :x-gap="18"
                class="card-count"
              >
                <n-gi
                  :span="1"
                  class="card-count-item"
                >
                  <div class="date-picker">
                    <n-date-picker
                      v-model:formatted-value="collectionCountYear"
                      format="yyyy年"
                      type="year"
                      style="width: 200px"
                      value-format="yyyy-MM-dd"
                      :is-date-disabled="isCanSelectDate"
                      @update:formatted-value="getAddition('年')"
                    />
                  </div>

                  <div class="item-text">
                    <div class="item-label">本年新增(件)</div>
                    <div class="item-count">{{ collectionAddCountYear }}</div>
                  </div>
                </n-gi>
                <n-gi
                  :span="1"
                  class="card-count-item"
                >
                  <div class="date-picker">
                    <n-date-picker
                      v-model:formatted-value="collectionCountMonth"
                      format="yyyy年MM月"
                      type="month"
                      style="width: 200px"
                      value-format="yyyy-MM-dd"
                      :is-date-disabled="isCanSelectDate"
                      @update:formatted-value="getAddition('月')"
                    />
                  </div>
                  <div class="item-text">
                    <div class="item-label">本月新增(件)</div>
                    <div class="item-count">{{ collectionAddCountMonth }}</div>
                  </div>
                </n-gi>
              </n-grid>
              <div class="select">
                <div class="tab">
                  <div
                    :class="['tab-item', curCollectionLineTab == '年走势' ? 'active' : '']"
                    @click="handleChangeTab('年走势')"
                  >
                    年走势
                  </div>
                  <div
                    :class="['tab-item', curCollectionLineTab == '月走势' ? 'active' : '']"
                    @click="handleChangeTab('月走势')"
                  >
                    月走势
                  </div>
                </div>
                <n-date-picker
                  v-if="curCollectionLineTab == '年走势'"
                  v-model:formatted-value="collectionCountLineYear"
                  format="yyyy年"
                  type="year"
                  style="width: 200px"
                  value-format="yyyy-MM-dd"
                  :is-date-disabled="isCanSelectDate"
                  @update:formatted-value="getAdditionTrend('年走势')"
                />
                <n-date-picker
                  v-else
                  v-model:formatted-value="collectionCountLineMonth"
                  format="yyyy年MM月"
                  type="month"
                  style="width: 200px"
                  value-format="yyyy-MM-dd"
                  :is-date-disabled="isCanSelectDate"
                  @update:formatted-value="getAdditionTrend('月走势')"
                />
              </div>
              <n-spin :show="collectionLineLoading">
                <LineChart
                  v-if="collectionLineData.length"
                  :data="collectionLineData"
                  id="lineChartA"
                  :style="{ lineColor: '#326C53', areaColor: ['#326C5333', '#326C5300'] }"
                ></LineChart>
                <div
                  class="center"
                  style="height: 200px"
                  v-else
                >
                  <n-empty description="暂无数据"></n-empty>
                </div>
              </n-spin>
            </div>
          </n-gi>
          <n-gi
            :span="5"
            class="card"
            style="padding-bottom: 0"
          >
            <div class="card-title">
              <div class="left center">
                <div class="line"></div>
                <div class="title">藏品类型统计</div>
              </div>
            </div>
            <div class="date-picker">
              <n-date-picker
                v-model:formatted-value="versionTypeDate"
                format="yyyy年MM月dd日"
                style="width: 200px"
                value-format="yyyy-MM-dd"
                :is-date-disabled="isCanSelectDate"
                @update:formatted-value="updateVersionTypeDate"
              />
            </div>
            <n-grid
              :cols="2"
              :x-gap="18"
            >
              <n-gi :span="1">
                <n-spin :show="versionLoading">
                  <BarChart
                    v-if="firstVersionTypeList.length"
                    :data="firstVersionTypeList"
                    id="barChartA"
                    name="藏品一级类型分析(单位：件)"
                    :height="400"
                    :grid="{
                      left: '90px',
                      top: '10%',
                      bottom: '16%',
                      right: '2%'
                    }"
                  ></BarChart>
                  <div
                    class="center"
                    style="height: 400px"
                    v-else
                  >
                    <n-empty description="暂无数据"></n-empty>
                  </div>
                </n-spin>
              </n-gi>
              <n-gi :span="1">
                <n-spin :show="versionLoading">
                  <BarChart
                    v-if="secondVersionTypeList.length"
                    :data="secondVersionTypeList"
                    id="barChartB"
                    name="藏品二级类型分析(单位：件)"
                    :height="400"
                    :grid="{
                      left: '90px',
                      top: '10%',
                      bottom: '16%',
                      right: '2%'
                    }"
                    :line-text="3"
                  ></BarChart>
                  <div
                    class="center"
                    style="height: 400px"
                    v-else
                  >
                    <n-empty description="暂无数据"></n-empty>
                  </div>
                </n-spin>
              </n-gi>
            </n-grid>
          </n-gi>
        </n-grid>
        <!-- 藏家统计&征集方式 -->
        <n-grid
          :cols="3"
          :x-gap="18"
          style="margin-top: 18px"
        >
          <n-gi
            :span="2"
            class="card"
          >
            <div class="card-title">
              <div class="left center">
                <div class="line"></div>
                <div class="title">藏家统计</div>
              </div>
              <span @click="openCollectorModal">查看全部</span>
            </div>
            <div class="date-picker">
              <n-date-picker
                v-model:formatted-value="collectorDate"
                format="yyyy年MM月dd日"
                style="width: 200px"
                value-format="yyyy-MM-dd"
                :is-date-disabled="isCanSelectDate"
                @update:formatted-value="getCollector"
              />
            </div>
            <div class="data-v-collector">
              <div class="data-v-col">
                <n-spin :show="collectorLoading">
                  <div
                    class="col-container"
                    v-if="collectorList.length"
                  >
                    <div
                      class="col-item"
                      v-for="(item, index) in collectorList"
                      :key="index"
                    >
                      <img
                        src="/src/assets/images/IconFirst.png"
                        class="item-icon"
                        alt=""
                        v-if="index == 0"
                      />
                      <img
                        src="/src/assets/images/IconSecond.png"
                        class="item-icon"
                        alt=""
                        v-else-if="index == 1"
                      />
                      <img
                        src="/src/assets/images/IconThird.png"
                        class="item-icon"
                        alt=""
                        v-else-if="index == 2"
                      />
                      <div
                        class="item-icon-frame center"
                        alt=""
                        v-else
                      >
                        <span>{{ index + 1 }}</span>
                      </div>
                      <div class="item-content">
                        <div class="item-content-top center">
                          <div
                            class="item-content-name"
                            style="width: 120px"
                          >
                            {{ item.label }}
                          </div>
                          <n-progress
                            color="#326C53"
                            type="line"
                            :height="12"
                            rail-color="#FFFFFF"
                            :percentage="item.percentage"
                            :show-indicator="false"
                          />
                          <div
                            class="item-content-count"
                            style="width: 140px; margin-left: 20px; text-align: right"
                          >
                            {{ item.value }} 件
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="center"
                    style="height: 200px"
                    v-else
                  >
                    <n-empty description="暂无数据"></n-empty>
                  </div>
                </n-spin>
              </div>
            </div>
          </n-gi>
          <n-gi
            :span="1"
            class="card"
            style="padding-bottom: 0"
          >
            <div class="card-title">
              <div class="left center">
                <div class="line"></div>
                <div class="title">征集方式</div>
              </div>
              <span @click="openCollectionModal">查看全部</span>
            </div>
            <div class="date-picker">
              <n-date-picker
                v-model:formatted-value="collectWayDate"
                format="yyyy年MM月dd日"
                style="width: 200px"
                value-format="yyyy-MM-dd"
                :is-date-disabled="isCanSelectDate"
                @update:formatted-value="getCollectWay"
              />
            </div>
            <n-grid
              :cols="2"
              :x-gap="18"
            >
              <n-gi :span="2">
                <n-spin :show="collectWayLoading">
                  <BarChart
                    v-if="collectWayList.length"
                    :data="collectWayList"
                    id="barChartC"
                    name="单位：件"
                    :height="280"
                    :grid="{
                      left: '90px',
                      top: '12%',
                      bottom: '20%',
                      right: '2%'
                    }"
                  ></BarChart>
                  <div
                    class="center"
                    style="height: 280px"
                    v-else
                  >
                    <n-empty description="暂无数据"></n-empty>
                  </div>
                </n-spin>
              </n-gi>
            </n-grid>
          </n-gi>
        </n-grid>
        <!-- 库房统计 -->
        <n-grid
          :cols="2"
          :x-gap="18"
          style="margin-top: 18px"
        >
          <n-gi
            :span="2"
            class="card"
          >
            <div class="card-title">
              <div class="left center">
                <div class="line"></div>
                <div class="title">库房统计</div>
              </div>
              <span @click="openWarehouseModal">查看全部</span>
            </div>
            <div class="date-picker">
              <n-date-picker
                v-model:formatted-value="warehouseDate"
                format="yyyy年MM月dd日"
                style="width: 200px"
                value-format="yyyy-MM-dd"
                :is-date-disabled="isCanSelectDate"
                @update:formatted-value="getWarehouseSnapshot"
              />
            </div>
            <n-spin :show="wareHouseLoading">
              <n-grid
                :cols="2"
                :x-gap="80"
                v-if="allWareHouseList.length"
              >
                <n-gi :span="1">
                  <div class="data-v-collector">
                    <div class="data-v-col">
                      <div class="col-container">
                        <div
                          class="col-item"
                          v-for="(item, index) in wareHouseListA"
                          :key="index"
                        >
                          <div class="item-content">
                            <div class="item-content-top center">
                              <div
                                class="item-content-name"
                                style="width: 150px"
                              >
                                {{ item.label }}
                              </div>
                              <n-progress
                                color="#326C53"
                                type="line"
                                :height="12"
                                rail-color="#FFFFFF"
                                :percentage="item.percentage"
                                :show-indicator="false"
                              />
                              <div
                                class="item-content-count"
                                style="width: 140px; margin-left: 20px; text-align: right"
                              >
                                {{ item.value }} 件
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </n-gi>
                <n-gi :span="1">
                  <div class="data-v-collector">
                    <div class="data-v-col">
                      <div class="col-container">
                        <div
                          class="col-item"
                          v-for="(item, index) in wareHouseListB"
                          :key="index"
                        >
                          <div class="item-content">
                            <div class="item-content-top center">
                              <div
                                class="item-content-name"
                                style="width: 150px"
                              >
                                {{ item.label }}
                              </div>
                              <n-progress
                                color="#326C53"
                                type="line"
                                :height="12"
                                rail-color="#FFFFFF"
                                :percentage="item.percentage"
                                :show-indicator="false"
                              />
                              <div
                                class="item-content-count"
                                style="width: 140px; margin-left: 20px; text-align: right"
                              >
                                {{ item.value }} 件
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </n-gi>
              </n-grid>
              <div
                class="center"
                style="height: 200px"
                v-else
              >
                <n-empty description="暂无数据"></n-empty>
              </div>
            </n-spin>
          </n-gi>
        </n-grid>
        <!-- 编目统计 -->
        <n-grid
          :cols="2"
          style="margin-top: 18px"
        >
          <n-gi
            :span="2"
            class="card"
          >
            <div class="card-title">
              <div class="left center">
                <div class="line"></div>
                <div class="title">编目统计</div>
              </div>
            </div>
            <div class="card-content">
              <div class="card-count">
                <n-grid
                  :cols="3"
                  :x-gap="18"
                >
                  <n-gi
                    :span="1"
                    class="card-count-item"
                    style="padding: 15px"
                  >
                    <div class="date-picker">
                      <n-date-picker
                        v-model:formatted-value="bmCountYearDate"
                        format="yyyy年"
                        type="year"
                        style="width: 200px"
                        value-format="yyyy-MM-dd"
                        :is-date-disabled="isCanSelectDate"
                        @update:formatted-value="getCatalog('年')"
                      />
                    </div>
                    <div class="bm-content">
                      <img
                        src="/src/assets/svg/bm_count1.svg"
                        alt=""
                        class="item-icon"
                      />
                      <div class="bm-text">
                        <div class="bm-label">本年新增(件)</div>
                        <div class="bm-count">{{ bmCountYear }}</div>
                      </div>
                    </div>
                  </n-gi>
                  <n-gi
                    :span="1"
                    class="card-count-item"
                    style="padding: 15px"
                  >
                    <div class="date-picker">
                      <n-date-picker
                        v-model:formatted-value="bmCountMonthDate"
                        format="yyyy年MM月"
                        type="month"
                        style="width: 200px"
                        value-format="yyyy-MM-dd"
                        :is-date-disabled="isCanSelectDate"
                        @update:formatted-value="getCatalog('月')"
                      />
                    </div>
                    <div class="bm-content">
                      <img
                        src="/src/assets/svg/bm_count2.svg"
                        alt=""
                        class="item-icon"
                      />
                      <div class="bm-text">
                        <div class="bm-label">本月新增(件)</div>
                        <div class="bm-count">{{ bmCountMonth }}</div>
                      </div>
                    </div>
                  </n-gi>
                  <n-gi
                    :span="1"
                    class="card-count-item"
                    style="padding: 15px"
                  >
                    <div class="date-picker">
                      <n-date-picker
                        v-model:formatted-value="bmCountWeekDate"
                        format="yyyy年MM月dd日"
                        type="daterange"
                        style="width: 300px"
                        value-format="yyyy-MM-dd"
                        :is-date-disabled="isCanSelectDateRange"
                        @update:formatted-value="getCatalog('周')"
                      />
                    </div>
                    <div class="bm-content">
                      <img
                        src="/src/assets/svg/bm_count3.svg"
                        alt=""
                        class="item-icon"
                      />
                      <div class="bm-text">
                        <div class="bm-label">近7天新增(件)</div>
                        <div class="bm-count">{{ bmCountWeek }}</div>
                      </div>
                    </div>
                  </n-gi>
                </n-grid>
              </div>
            </div>
          </n-gi>
        </n-grid>
        <!-- 编目走势 -->
        <n-grid
          :cols="2"
          style="margin-top: 18px"
        >
          <n-gi
            :span="2"
            class="card"
            style="padding-bottom: 0"
          >
            <div class="card-title">
              <div class="left center">
                <div class="line"></div>
                <div class="title">编目走势</div>
              </div>
            </div>
            <div class="card-content">
              <div class="select">
                <div class="tab">
                  <div
                    :class="['tab-item', curBmLineTab == '年走势' ? 'active' : '']"
                    @click="handleChangeBmTab('年走势')"
                  >
                    年走势
                  </div>
                  <div
                    :class="['tab-item', curBmLineTab == '月走势' ? 'active' : '']"
                    @click="handleChangeBmTab('月走势')"
                  >
                    月走势
                  </div>
                </div>
                <n-date-picker
                  v-if="curBmLineTab == '年走势'"
                  v-model:formatted-value="bmCountLineYear"
                  format="yyyy年"
                  type="year"
                  style="width: 200px"
                  value-format="yyyy-MM-dd"
                  :is-date-disabled="isCanSelectDate"
                  @update:formatted-value="getCatalogTrend('年走势')"
                />
                <n-date-picker
                  v-else
                  v-model:formatted-value="bmCountLineMonth"
                  format="yyyy年MM月"
                  type="month"
                  style="width: 200px"
                  value-format="yyyy-MM-dd"
                  :is-date-disabled="isCanSelectDate"
                  @update:formatted-value="getCatalogTrend('月走势')"
                />
              </div>
              <n-spin :show="bmLineLoading">
                <LineChart
                  v-if="bmLineData.length"
                  :data="bmLineData"
                  id="lineChartB"
                  :style="{ lineColor: '#F3963E', areaColor: ['#F3963E00', '#F3963E33'] }"
                ></LineChart>
                <div
                  class="center"
                  style="height: 200px"
                  v-else
                >
                  <n-empty description="暂无数据"></n-empty>
                </div>
              </n-spin>
            </div>
          </n-gi>
        </n-grid>
        <!-- 人员走势 -->
        <n-grid
          :cols="2"
          style="margin-top: 18px"
        >
          <n-gi
            :span="2"
            class="card"
            style="padding-bottom: 0"
          >
            <div class="card-title">
              <div class="left center">
                <div class="line"></div>
                <div class="title">人员走势</div>
              </div>
            </div>
            <div class="card-content">
              <div class="select">
                <div class="tab">
                  <div
                    :class="['tab-item', curUserLineTab == '年走势' ? 'active' : '']"
                    @click="handleChangeUserTab('年走势')"
                  >
                    年走势
                  </div>
                  <div
                    :class="['tab-item', curUserLineTab == '月走势' ? 'active' : '']"
                    @click="handleChangeUserTab('月走势')"
                  >
                    月走势
                  </div>
                </div>
                <n-date-picker
                  v-if="curUserLineTab == '年走势'"
                  v-model:formatted-value="userCountLineYear"
                  format="yyyy年"
                  type="year"
                  style="width: 200px"
                  value-format="yyyy-MM-dd"
                  :is-date-disabled="isCanSelectDate"
                  @update:formatted-value="getUserTrend('年走势')"
                />
                <n-date-picker
                  v-else
                  v-model:formatted-value="userCountLineMonth"
                  format="yyyy年MM月"
                  type="month"
                  style="width: 200px"
                  value-format="yyyy-MM-dd"
                  :is-date-disabled="isCanSelectDate"
                  @update:formatted-value="getUserTrend('月走势')"
                />
              </div>
              <n-spin :show="userLineLoading">
                <BarChart
                  v-if="userLineData.length"
                  :data="userLineData"
                  name="单位：件"
                  id="barChartD"
                  :height="260"
                  :grid="{
                    left: '60px',
                    top: '12%',
                    bottom: '20%',
                    right: '2%'
                  }"
                ></BarChart>
                <div
                  class="center"
                  style="height: 260px"
                  v-else
                >
                  <n-empty description="暂无数据"></n-empty>
                </div>
              </n-spin>
            </div>
          </n-gi>
        </n-grid>
      </div>
    </div>
  </div>
  <!-- 藏家统计全部弹框 -->
  <n-modal
    v-model:show="showCollectorModal"
    class="custom-card"
    preset="card"
    :style="{ width: '60%' }"
    title="藏家统计"
    :bordered="true"
  >
    <div class="collector-search">
      <n-input
        placeholder="请输入藏家名字"
        style="width: 300px"
        v-model:value="keywords"
        @blur="searchCollector"
        @keyup.enter="searchCollector"
      >
        <template #suffix>
          <n-icon
            :component="Search"
            @click="searchCollector"
            style="cursor: pointer"
          />
        </template>
      </n-input>
    </div>
    <div class="data-v-collector">
      <div class="data-v-col">
        <div
          class="col-container"
          style="padding-bottom: 20px; margin-top: 20px; border-bottom: 1px dashed #0b8d61"
          v-if="searchList.length"
        >
          <div
            class="col-item"
            style="
              margin: 1px;
              padding: 10px;
              outline: 1px solid var(--11111, #0b8d61);
              background: #baded24d;
            "
            v-for="(item, index) in searchList"
            :key="index"
          >
            <img
              src="/src/assets/images/IconFirst.png"
              class="item-icon"
              alt=""
              v-if="item.rank == 0"
            />
            <img
              src="/src/assets/images/IconSecond.png"
              class="item-icon"
              alt=""
              v-else-if="item.rank == 1"
            />
            <img
              src="/src/assets/images/IconThird.png"
              class="item-icon"
              alt=""
              v-else-if="item.rank == 2"
            />
            <div
              class="item-icon-frame center"
              alt=""
              v-else
            >
              <span>{{ item.rank + 1 }}</span>
            </div>
            <div class="item-content">
              <div class="item-content-top center">
                <div
                  class="item-content-name"
                  style="width: 120px"
                >
                  {{ item.label }}
                </div>
                <n-progress
                  color="#326C53"
                  type="line"
                  :height="12"
                  rail-color="#06885D26"
                  :percentage="item.percentage"
                  :show-indicator="false"
                />
                <div
                  class="item-content-count"
                  style="width: 120px; margin-left: 20px; text-align: right"
                >
                  {{ item.value }} 件
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <n-spin
        :show="!allCollectorList.length"
        style="height: 50vh"
      >
        <n-scrollbar style="max-height: 50vh">
          <div
            class="data-v-col"
            style="margin-right: 10px"
          >
            <div class="col-container">
              <div
                class="col-item"
                v-for="(item, index) in allCollectorList"
                :key="index"
              >
                <img
                  src="/src/assets/images/IconFirst.png"
                  class="item-icon"
                  alt=""
                  v-if="index == 0"
                />
                <img
                  src="/src/assets/images/IconSecond.png"
                  class="item-icon"
                  alt=""
                  v-else-if="index == 1"
                />
                <img
                  src="/src/assets/images/IconThird.png"
                  class="item-icon"
                  alt=""
                  v-else-if="index == 2"
                />
                <div
                  class="item-icon-frame center"
                  alt=""
                  v-else
                >
                  <span>{{ index + 1 }}</span>
                </div>
                <div class="item-content">
                  <div class="item-content-top center">
                    <div
                      class="item-content-name"
                      style="width: 120px"
                    >
                      {{ item.label }}
                    </div>
                    <n-progress
                      color="#326C53"
                      type="line"
                      :height="12"
                      rail-color="#06885D26"
                      :percentage="item.percentage"
                      :show-indicator="false"
                    />
                    <div
                      class="item-content-count"
                      style="width: 120px; margin-left: 20px; text-align: right"
                    >
                      {{ item.value }} 件
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </n-scrollbar>
      </n-spin>
    </div>
  </n-modal>
  <!-- 征集方式统计全部弹框 -->
  <n-modal
    v-model:show="showCollectionModal"
    class="custom-card"
    preset="card"
    :style="{ width: '60%' }"
    title="征集方式"
    :bordered="true"
  >
    <div class="collector-search">
      <n-input
        placeholder="请输入征集方式"
        style="width: 300px"
        v-model:value="colKeywords"
        @blur="searchCollectWay"
        @keyup.enter="searchCollectWay"
      >
        <template #suffix>
          <n-icon
            :component="Search"
            @click="searchCollectWay"
            style="cursor: pointer"
          />
        </template>
      </n-input>
    </div>
    <n-spin :show="!searchColList.length">
      <div class="data-v-collector">
        <BarChart
          :data="searchColList"
          id="barChartE"
          name="单位：件"
          :height="400"
          :grid="{
            left: '8%',
            top: '10%',
            bottom: '16%',
            right: '2%'
          }"
          :bar-bg-color="'#06885D26'"
        ></BarChart>
      </div>
    </n-spin>
  </n-modal>
  <!-- 库房统计全部弹框 -->
  <n-modal
    v-model:show="showWarehouseModal"
    class="custom-card"
    preset="card"
    :style="{ width: '60%' }"
    title="库房统计"
    :bordered="true"
  >
    <div class="collector-search">
      <n-input
        placeholder="请输入库房名字"
        style="width: 300px"
        v-model:value="wareKeywords"
        @blur="searchWarehouse"
        @keyup.enter="searchWarehouse"
      >
        <template #suffix>
          <n-icon
            :component="Search"
            @click="searchWarehouse"
            style="cursor: pointer"
          />
        </template>
      </n-input>
    </div>
    <div class="data-v-collector">
      <div class="data-v-col">
        <div
          class="col-container"
          style="padding-bottom: 20px; margin-top: 20px; border-bottom: 1px dashed #0b8d61"
          v-if="searchWarehouseList.length"
        >
          <div
            class="col-item"
            style="
              margin: 1px;
              padding: 10px;
              outline: 1px solid var(--11111, #0b8d61);
              background: rgba(186, 222, 210, 0.3);
            "
            v-for="(item, index) in searchWarehouseList"
            :key="index"
          >
            <div class="item-content">
              <div class="item-content-top center">
                <div
                  class="item-content-name"
                  style="width: 150px"
                >
                  {{ item.label }}
                </div>
                <n-progress
                  color="#326C53"
                  type="line"
                  :height="12"
                  rail-color="#06885D26"
                  :percentage="item.percentage"
                  :show-indicator="false"
                />
                <div
                  class="item-content-count"
                  style="width: 120px; margin-left: 20px; text-align: right"
                >
                  {{ item.value }} 件
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <n-scrollbar style="max-height: 50vh">
        <div
          class="data-v-col"
          style="margin-right: 10px"
        >
          <div class="col-container">
            <div
              class="col-item"
              v-for="(item, index) in allWareHouseList"
              :key="index"
            >
              <div class="item-content">
                <div class="item-content-top center">
                  <div
                    class="item-content-name"
                    style="width: 150px"
                  >
                    {{ item.label }}
                  </div>
                  <n-progress
                    color="#326C53"
                    type="line"
                    :height="12"
                    rail-color="#06885D26"
                    :percentage="item.percentage"
                    :show-indicator="false"
                  />
                  <div
                    class="item-content-count"
                    style="width: 120px; margin-left: 20px; text-align: right"
                  >
                    {{ item.value }} 件
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </n-scrollbar>
    </div>
  </n-modal>
</template>
<style lang="scss" scoped>
.container {
  background-color: #f0efee;
  padding-bottom: 20px;
  .header {
    display: flex;
    justify-content: space-between;
    span {
      font-family: 'HYCuSongJ';
      font-size: 20px;
      line-height: 56px;
      // font-weight: 700;
      color: #2d3339;
    }
  }
  .main-content {
    // min-width: 1670px;
    // padding: 24px;
    // 征集总数
    .data-v-top {
      display: flex;
      .data-v-top-left {
        // width: 36vw;
        // padding: 14px 0;
        border-radius: 8px;
        background-color: #ffffff;
        display: flex;
        position: relative;
        overflow: hidden;
        .img-f {
          /* Vector */
          position: absolute;
          right: -0;
          bottom: -0;
          opacity: 0.1;
        }
        .content {
          padding: 13px 20px 0;
          //   display: flex;
          //   justify-content: space-between;
          //   align-items: center;
          width: 100%;
          .top {
            display: flex;
            .col-txt {
              font-size: 16px;
              margin-left: 5px;
            }
            .icon-left {
              width: 24px;
              height: 24px;
              padding: 27px;
              border-radius: 50%;
              background-color: #d7f1de;
              display: flex;
              justify-content: center;
              align-items: center;
              .img-l {
                width: 24px;
                height: 24px;
              }
            }
          }
          .bottom {
            display: flex;
            justify-content: space-between;
            .col-count {
              font-size: 34px;
              color: #00895b;
            }
          }
        }
      }
    }
    // 数据分析主容器
    .data-v-main {
      margin-top: 24px;
      // 藏品&藏品类型统计
      .card {
        padding: 20px;
        background-color: #e1e1e1;
        .card-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .left {
            .line {
              width: 4px;
              height: 18px;
              border-radius: 4px;
              background-color: #6cb187;
            }
            .title {
              font-size: 20px;
              font-weight: 500;
              line-height: 34px;
              margin-left: 5px;
            }
          }
          span {
            color: rgba(11, 141, 97, 1);
            float: right;
            cursor: pointer;
          }
        }
        .card-content {
          .card-count {
            margin-top: 20px;
            .card-count-item {
              padding: 20px;
              border-radius: 8px;
              background-color: #ffffff;

              .item-text {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 12px;
                .item-label {
                  color: #5a6672;
                  font-size: 16px;
                  font-weight: 500;
                }
                .item-count {
                  font-size: 30px;
                  color: #00895b;
                }
              }
              .bm-content {
                display: flex;
                margin-left: 20%;
                padding: 10px 0;
                .item-icon {
                  width: 88px;
                  height: 88px;
                }
                .bm-text {
                  margin-left: 20px;
                  display: flex;
                  flex-flow: column;
                  justify-content: space-between;
                  .bm-label {
                    color: rgba(90, 102, 114, 1);
                    font-size: 16px;
                  }
                  .bm-count {
                    color: rgba(0, 137, 91, 1);
                    font-size: 34px;
                  }
                }
              }
            }
          }
          .select {
            margin-top: 20px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            .tab {
              width: 150px;
              height: 24px;
              border-radius: 24px;
              background-color: #ffffff;
              display: flex;
              margin-right: 20px;
              .tab-item {
                cursor: pointer;
                width: 75px;
                text-align: center;
                font-size: 14px;
                font-weight: 500;
                color: #86909c;
              }
              .active {
                color: #ffffff;
                background-color: #326c53;
                border-radius: 24px;
              }
            }
          }
        }
      }
    }
  }
}
// 藏家统计&征集方式
.data-v-collector {
  .data-v-col {
    .col-title {
      font-size: 16px;
      line-height: 48px;
      padding: 0 24px;
      border-bottom: 1px solid #f1f2f4;
    }
    .col-container {
      .col-item {
        display: flex;
        align-items: center;
        padding: 10px 0;
        .item-icon {
          width: 32px;
          height: 32px;
        }
        .item-icon-frame {
          width: 32px;
          height: 32px;
          background: url('/src/assets/svg/frame.svg') no-repeat;
          background-position: 50% 50%;
          background-size: 26px;
          span {
            color: #ffffff;
            text-shadow: #5e73a880 0px 2px 2px;
          }
        }
        .item-left {
          width: 32px;
          height: 32px;
          line-height: 32px;
          font-size: 18px;
          color: #86909c;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .item-content {
          margin-left: 8px;
          flex-grow: 1;
          .item-content-top {
            display: flex;
            justify-content: space-between;
            .item-content-name {
            }
            .item-content-count {
              color: #326c53;
              font-size: 16px;
            }
          }
        }
      }
    }
    .colSecTop {
      flex-grow: 1;
      .colSecTopItem {
        display: flex;
        align-items: center;
        font-size: 12px;
        margin-top: 8px;
        .item-num {
          align-items: center;
          color: #86909c;
          display: flex;
          justify-content: center;
          line-height: 24px;
          width: 24px;
          margin-right: 5px;
        }
        .item-count {
          width: 100px;
          text-align: right;
          color: #326c53;
        }
      }
    }
  }
}
.collector-search {
  display: flex;
  justify-content: flex-end;
}
.date-picker {
  display: flex;
  justify-content: flex-end;
}
.border {
  border: 1px solid #e2e5e9;
}
.radius {
  border-radius: 8px;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
